<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="70%">
      <el-form ref="dialogForm" :model="form" :inline="true" :rules="rules" class="demo-ruleForm">
        <el-row :gutter="10">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="标识" :label-width="formLabelWidth" prop="url">
                <el-input v-model="form.url" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="是否是菜单" :label-width="formLabelWidth">
                <el-radio-group v-model="form.isMenu">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="是否启用" :label-width="formLabelWidth">
                <el-radio-group v-model="form.isValid">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="值" :label-width="formLabelWidth" prop="icon">
                <el-select v-model="form.icon" placeholder="请选择图标">
                  <el-option
                    v-for="item in itemIcon"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                    <i :class="item.value"></i>
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="FormSub('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="部门管理" :visible.sync="dialogFormVisible" width="70%">
      <el-form :model="form" :inline="true">
        <el-row :gutter="10">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="排序" :label-width="formLabelWidth">
                <el-input-number v-model="form.sort" controls-position="right" :min="1" :max="10"></el-input-number>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="11">
            <div class="grid-content bg-purple">
              <el-form-item label="父部门" :label-width="formLabelWidth">
                <el-input v-model="form.label" autocomplete="off"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-button-group style="margin: 0px 0px 10px 0px">
      <el-button type="primary" icon="el-icon-plus" @click="dialogForm(1)">添加</el-button>
      <el-button type="primary" icon="el-icon-edit" @click="dialogForm(2)">修改</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="dialogDelete()">删除</el-button>
    </el-button-group>
    <el-container>
      <el-table
        :columns="columns"
        ref="singleTable"
        v-loading="listLoading"
        row-key="id"
        :height="height"
        :data="list"
        @row-click='rowClick'
        highlight-current-row
        element-loading-text="Loading"
        border
        fit
        default-expand-all
        :tree-props="{children: 'children'}">
        <el-table-column v-for="(column, key) in columns"
                         :prop="column.prop"
                         :label="column.label"
                         :width="column.width"
                         :fixed="column.fixed"
                         :formatter="column.formatter">
        </el-table-column>
        <el-table-column
          prop="isValid"
          label="状态"
          width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.isValid === '0' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.isValid === '0'?'可用':'禁用'}}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: '',
      dialogFormVisible: false,
      treeData: [],
      filterText: '',
      listLoading: false,
      formLabelWidth: '120px',
      form: {
        addOrup: 1,
        sort: 1,
        name: '',
        isValid: '1',
        isMenu: '1',
        superMod: [],
        icon: ''
      }
    }
  },
  created() {
    // 组件创建完后获取数据，
    // 此时 data 已经被 observed 了
    this.getMovie()
  },
  mounted: function() {
    this.getMovie()
  },
  methods: {
    open() {
      this.$confirm('此操作将删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    dialogForm(val) {
      this.form.sort = 1
      this.form.name = ''
      this.form.isValid = '1'
      this.form.isMenu = '1'
      this.form.superMod = []
      this.form.icon = ''
      this.value[0] = ''
      if (val === 1) {
        this.title = '添加菜单'
        this.form.sort = 1
        this.form.addOrup = 1
      } else {
        if (this.updateMoudle.length <= 0) {
          alert('请先选择要修改的菜单!')
          return
        }
        this.updateMoudle
        this.form.sort = this.updateMoudle.sort
        this.form.name = this.updateMoudle.name
        this.form.isValid = this.updateMoudle.isValid
        this.form.isMenu = this.updateMoudle.isMenu
        this.value[0] = this.updateMoudle.superMod
        this.form.icon = this.updateMoudle.icon
        this.title = '修改菜单'
        this.form.addOrup = 2
      }
      this.dialogFormVisible = true
    },
    getMovie: function() {
      var self = this
      this.$http.get('/dev-api/dep/treeDep')
        .then(res => {
          self.treeData = res.data.data
        })
    }
  }
}
</script>
<style scoped>
  .el-form--inline label {
    width: 120px;
  }
  .el-form--inline .el-form-item__content {
    width: 270px;
  }
</style>
